//滚动状态 //开奖状态
<template>
  <view class="count-to">
    <view class="count-to-header">
      <slot name="header"><view class="count-to-title" v-text="title"></view></slot>
    </view>
    <view class="count-to-body">
      <view class="count-to-body-item" v-for="(item, index) in dynamicValue" :key="index">
        <view class="ul">
          <view class="li">
            
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { randomNum } from "@/utils";
let timer = null,
  _speed = 100; // 速度
export default {
  name: "countTo",
  data() {
    return {
      dynamicValue: []
    };
  },
  watch: {
    complete(n) {}
  },
  props: {
    title: {
      type: String,
      default: "本期获得"
    },
    length: {
      type: Number,
      default: 6
    },
    complete: {
      type: Boolean,
      default: false
    },
    value: Number
  },
  methods: {
    initDynamicValue() {
      let v = [];
      for (let i = 0; i < this.length; i++) {
        v.push(randomNum(0, 9));
      }
      this.dynamicValue = v;
    },
    dynamic(speed){
      timer = setInterval(() => {
        for (let i = 0; i < this.dynamicValue.length; i++) {
          this.dynamicValue[i] = this.dynamicValue[i] + 1;
          if (this.dynamicValue[i] > 9) {
            this.dynamicValue[i] = 0;
          }
        }
        this.$forceUpdate();
      }, speed);
      return timer;
    }
  },
  mounted() {
    this.initDynamicValue();
    this.dynamic(_speed)

    setTimeout(() => {
      clearInterval(timer);
      this.dynamic(2000);
    }, 500);
  }
};
</script>

<style lang="scss" scoped>
.count-to {
  width: 100%;
  height: 100%;
  &-title {
    line-height: 60upx;
    color: #3c3c3c;
    font-size: 30upx;
    text-align: center;
  }
  &-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    &-item {
      border-radius: 6upx;
      border: 1upx solid #9aa2af;
      padding: 12upx 20upx;
      font-size: 48upx;
      color: red;
    }
  }
}
</style>
